<template>
  <div id="quantum-field" class="quantum-field">
    <div class="nebula"></div>
    <div class="hologrid"></div>
    <div id="photons"></div>
    <div id="stars"></div>
    <div id="pulses"></div>
  </div>
</template>

<script setup>
import {ref, onMounted, defineProps} from 'vue'

// 生成彩色星空
function createStars() {
  const container = document.getElementById('stars');
  for (let i = 0; i < 300; i++) {
    const star = document.createElement('div');
    star.className = 'star';
    star.style.width = Math.random()*4 + 'px';
    star.style.height = star.style.width;
    star.style.left = Math.random()*100 + '%';
    star.style.top = Math.random()*100 + '%';
    star.style.animationDelay = Math.random()*5 + 's';
    star.style.color = `hsl(${Math.random()*360}, 100%, 80%)`;
    container.appendChild(star);
  }
}

// 生成光流粒子
function createPhotons() {
  const container = document.getElementById('photons');
  for (let i = 0; i < 15; i++) {
    const photon = document.createElement('div');
    photon.className = 'photon-stream';
    photon.style.left = Math.random()*100 + '%';
    photon.style.animation = `photonFlow ${8 + Math.random()*10}s linear infinite`;
    photon.style.setProperty('--hue', Math.random()*360);
    container.appendChild(photon);
  }
}

// 生成能量脉冲
function createPulses() {
  setInterval(() => {
    const pulse = document.createElement('div');
    pulse.className = 'energy-pulse';
    pulse.style.left = Math.random()*100 + '%';
    pulse.style.top = Math.random()*100 + '%';
    document.getElementById('pulses').appendChild(pulse);

    setTimeout(() => pulse.remove(), 5000);
  }, 2000);
}

onMounted(function (){
  createStars();
  createPhotons();
  createPulses();
})

// 鼠标互动效果
document.addEventListener('mousemove', (e) => {
  const particles = 5;
  for(let i=0; i<particles; i++){
    const particle = document.createElement('div');
    particle.style.position = 'absolute';
    particle.style.left = e.pageX + 'px';
    particle.style.top = e.pageY + 'px';
    particle.style.width = '3px';
    particle.style.height = '3px';
    particle.style.background = `hsl(${Math.random()*360}, 100%, 50%)`;
    particle.style.borderRadius = '50%';
    particle.style.animation = `particleFly ${0.5+Math.random()*1}s linear`;
    document.body.appendChild(particle);

    setTimeout(() => particle.remove(), 1000);
  }
});
</script>


<style>
:root {
  --neon-blue: #00f7ff;
  --neon-purple: #bc13fe;
  --matrix-green: #0f0;
}

body {
  margin: 0;
  overflow: hidden;
  background: radial-gradient(circle at center,
  #000000 0%,
  #0a0a2e 40%,
  #17003a 100%);
  height: 100vh;
}

.quantum-field {
  position: relative;
  width: 100%;
  height: 100vh;
  filter: blur(0.5px);
}

/* 量子星云 */
.nebula {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%,
  rgba(188, 19, 254, 0.1) 0%,
  rgba(0, 247, 255, 0.05) 50%,
  transparent 100%);
  animation: nebulaPulse 12s infinite;
}

/* 动态光流粒子 */
.photon-stream {
  position: absolute;
  width: 2px;
  height: 100px;
  background: linear-gradient(to bottom,
  transparent 0%,
  var(--neon-blue) 30%,
  var(--neon-purple) 70%,
  transparent 100%);
  opacity: 0.7;
  filter: blur(1px);
}

/* 能量脉冲 */
.energy-pulse {
  position: absolute;
  border: 2px solid var(--neon-blue);
  border-radius: 50%;
  box-shadow: 0 0 30px var(--neon-purple);
  animation: pulseExpand 5s infinite;
}

@keyframes nebulaPulse {
  0% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
  100% { opacity: 0.3; transform: scale(1); }
}

@keyframes pulseExpand {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(5); opacity: 0; }
}

/* 光流路径动画 */
@keyframes photonFlow {
  0% { transform: translateY(-100%) rotate(45deg); }
  100% { transform: translateY(100vh) rotate(45deg); }
}

/* 增强版星空 */
.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: colorTwinkle 3s infinite;
  filter: drop-shadow(0 0 5px currentColor);
}

@keyframes colorTwinkle {
  0% { opacity: 0.2; }
  50% {
    opacity: 1;
    background: hsl(${Math.random()*360}, 100%, 80%);
    transform: scale(1.5);
  }
  100% { opacity: 0.2; }
}

/* 全息网格 */
/*.hologrid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
      linear-gradient(rgba(0, 247, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 247, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}*/
</style>